<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Component 标签</title>
	<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
	<h1>Component 标签</h1>

	<hr>
	<div id="app">
        <component :is="message"></component>
        <button @click="change">change</button>
	</div>
    

</body>
<script type="text/javascript">
var componentA = {
	template:`
	<div style="color:red">i'm componentA</div>
	`
} 
var componentB = {
	template:`
	<div style="color:green">i'm componentB</div>
	`
}
var componentC = {
	template:`
	<div style="color:pink">i'm componentC</div>
	`
}
var app = new Vue({
	el:'#app',
	data:{
		message:'componentA'
	},
    components:{
        "componentA":componentA,
        "componentB":componentB,
        "componentC":componentC,
    },
    methods:{
    	change:function () {
    		if (this.message == "componentA") {
    			this.message="componentB";
    		}else if (this.message == "componentB") {
    			this.message = "componentC"
    		}else{
    			this.message = "componentA"
    		}
    	}
    }
   
})

</script>
</html>